<script lang="tsx">
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { Component } from 'vue-property-decorator'
import easyTableOperate from './easy-table-operate.vue'
import ResponseDialog from 'components/common/response-dialog.vue'
import { date } from 'quasar'
@Component({
    components: {
        ResponseDialog
    },
    methods: {
        ...mapMutations(process.env.APP_SCOPE_NAME, ['setPageTitle']),
        componentCallback ({ row, column, field, rowIndex, handlerType }) {
            if (handlerType === 'click') {
                this.getTargetLog(row)
            }
        },
        getTableSelect () {
            this.http.getTableSelect().then(res => {
                this.queryOptions = res || {}
                let processCodeSelect = res.process_code_select || []
                let processCodeToDeviceCodeMap = {}
                processCodeSelect.forEach(item => {
                    processCodeToDeviceCodeMap[item.prop] = item.children || []
                })
                this.processCodeToDeviceCodeMap = processCodeToDeviceCodeMap
                this.getAllLogs()
            })
        },
        selectChange (field) {
            if (field === 'process_code') {
                this.query.device_code = ''
            }
        },
        getAllLogs (reset = false) { // reset:重置pageIndex为1
            reset && (this.pagination.pageIndex = 1)
            this.http.getAllLogs({
                ...this.query,
                page: this.pagination.pageIndex,
                size: this.pagination.pageSize
            }).then(res => {
                let header = res.header || []
                this.tableHeader = [...header, { label: '操作', prop: 'operate' }]
                this.tableData = res.data
                this.pagination.total = res.total || 0
            }).catch(() => {

            })
        },
        getTargetLog (row) {
            this.http.getTargetLog({
                uid: row.uid
            }).then(res => {
                let ref = this.$refs['response-dialog'] as Vue
                ref && ref.triggerShow(res)
            }).catch(() => {

            })
        },
        pageChange ({ pageIndex, pageSize }) {
            this.pagination.pageIndex = pageIndex
            this.pagination.pageSize = pageSize
            this.getAllLogs()
        },
        resize ({ height }) {
            let h = document.body.clientHeight || document.documentElement.clientHeight
            this.tableHeight = h - height - 70 // 50 + 16 + 4
        }
    }
})
export default class Layout extends Vue {
    public query: {
        time_section?: string[],
        [property: string]: any
    } = {
        process_code: '', // 工序
        device_code: '', // 设备
        api_string: '', // 接口
        api_response_code: '', // 返回结果
        time_section: [] // 调用时间
    }

    public queryOptions: {
        [property: string]: any
    } = {}

    public processCodeToDeviceCodeMap = {}

    public tableHeader = []
    public tableData = []
    public tableHeight = 300
    public pagination = {
        enable: true,
        total: 0,
        pageIndex: 1,
        pageSize: 30,
        pageSizeOption: [30, 50, 80]
    }

    public configs = {
        component: {
            operate: easyTableOperate
        },
        componentCallback: this.componentCallback
    }

    created () {
        this.setPageTitle('日志查询')
        let today = date.formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
        let yestoday = date.formatDate(date.addToDate(new Date(), { days: -1 }), 'YYYY-MM-DD HH:mm:ss')
        this.query.time_section = [yestoday, today]
        console.log(today)
        this.getTableSelect()
    }

    render (): JSX.Element {
        return (
            <div class="q-pa-sm">
                <div class="row items-center q-mb-xs">
                    <div class="q-mr-sm q-my-xs">
                        <small class="q-mr-xs">工序：</small>
                        <el-select v-model={this.query.process_code} size="small" clearable filterable on-change={() => this.selectChange('process_code')}>
                            {
                                this.queryOptions.process_code_select
                                    ? this.queryOptions.process_code_select.map(item => <el-option key={item.prop} label={item.label} value={item.prop}></el-option>)
                                    : ''
                            }
                        </el-select>
                    </div>
                    <div class="q-mr-sm q-my-xs">
                        <small class="q-mr-xs">设备：</small>
                        <el-select v-model={this.query.device_code} size="small" clearable>
                            {
                                this.processCodeToDeviceCodeMap[this.query.process_code]
                                    ? this.processCodeToDeviceCodeMap[this.query.process_code].map(item => <el-option key={item.prop} label={item.label} value={item.prop}></el-option>)
                                    : ''
                            }
                        </el-select>
                    </div>
                    <div class="q-mr-sm q-my-xs">
                        <small class="q-mr-xs">调用接口：</small>
                        <el-select v-model={this.query.api_string} size="small" clearable>
                            {
                                this.queryOptions.api_string_select
                                    ? this.queryOptions.api_string_select.map(item => <el-option key={item.prop} label={item.label} value={item.prop}></el-option>)
                                    : ''
                            }
                        </el-select>
                    </div>
                    <div class="q-mr-sm q-my-xs">
                        <small class="q-mr-xs">返回结果：</small>
                        <el-select v-model={this.query.api_response_code} size="small" clearable>
                            {
                                this.queryOptions.api_response_code_select
                                    ? this.queryOptions.api_response_code_select.map(item => <el-option key={item.prop} label={item.label} value={item.prop}></el-option>)
                                    : ''
                            }
                        </el-select>
                    </div>
                    <div class="q-mr-sm q-my-xs">
                        <small class="q-mr-xs">调用时间：</small>
                        <el-date-picker v-model={this.query.time_section}
                            type="datetimerange"
                            size="small"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </div>
                    <el-button class="q-my-xs" type="primary" size="small" on-click={() => this.getAllLogs(true)}>查询</el-button>
                    <q-resize-observable on-resize={this.resize}></q-resize-observable>
                </div>

                <mg-easy-table node-label="label"
                    node-key="prop"
                    header-data={this.tableHeader}
                    table-data={this.tableData}
                    max-height={this.tableHeight}
                    configs={this.configs}
                    pagination={this.pagination}
                    on-page-change={this.pageChange}></mg-easy-table>

                <response-dialog ref="response-dialog"></response-dialog>
            </div>
        )
    }
}
</script>

